<template>
	<view class="container">
		<!-- 个人信息栏 -->
		<view class="topInfo-box">
			<image :src="memberInfo.avatar || '../../static/user/touxiang.png'" mode="widthFix" @click="navTo('/pages/user/set/setinfo','1')"></image>
			<view @click="navTo('/pages/user/set/setinfo','1')" class="checkinfo">{{memberInfo.nickname || '立即登录'}}</view>
			<view class="vipbox" @click="navTo('/pages/member/member','1')" v-if="memberInfo.is_vip == 0">
				<image  style="width: 25rpx;" src="../../static/user/noVip.png" mode="widthFix" @click="navTo('/pages/member/member','1')"></image>
				<text >开通会员</text>
			</view>
			<view @click="navTo('/pages/member/member','1')" >
				<image src="/static/user/isvip.png" v-if="memberInfo.is_vip == 1" class="isvip"></image>
			</view>
			<view class="vipmun" v-if="vipNum!=null">
				当前已有<text>{{vipNum}}人</text>开通会员啦！
			</view>
		</view>
		<!-- 钱包栏 -->
		<view class="wallet">
			<view class="my-wallet">我的钱包</view>
			<view class="wallet-item">
				<view class="point" @click="navTo('/pages/point/point','1')">
					<image style="width: 90rpx;" src="../../static/index/ji.png" mode="widthFix"></image>
					<view class="num">{{memberInfo.score}}</view>
					<view class="item">积分</view>
				</view>
				<view class="point" @click="navTo('/pages/balance/balance','1')">
					<image style="width: 90rpx;" src="../../static/index/yu.png" mode="widthFix"></image>
					<view class="num">{{memberInfo.balance}}</view>
					<view class="item">余额</view>
				</view>
				<view class="point" @click="navTo('/pages/tong/tong','1')">
					<image style="width: 90rpx;" src="../../static/index/tong.png" mode="widthFix"></image>
					<view class="num">{{memberInfo.virtual_coin}}</view>
					<view class="item">通证</view>
				</view>
			</view>
		</view>
		<!-- 订单栏 -->
		<view class="order-box">
			<view class="myorder">
				<view class="mine">我的订单</view>
				<view @click="navTo('/pages/order/order?type=0','1')">
					<text class="allorder">查看全部订单</text>
					<u-icon name="arrow-right" class="#333333" size="30"></u-icon>
				</view>
			</view>
			<view class="order-item">
				<view class="states" @click="navTo('/pages/order/order?type=1','1')">
					<!-- <view class="statecode">1</view> -->
					<image src="../../static/user/daipay.png" mode="widthFix"></image>
					<view>待付款</view>
				</view>
				<view class="states" @click="navTo('/pages/order/order?type=2','1')">
					<!-- <view class="statecode">1</view> -->
					<image src="../../static/user/daifahuo.png" mode="widthFix"></image>
					<view>待发货</view>
				</view>
				<view class="states" @click="navTo('/pages/order/order?type=3','1')">
					<!-- <view class="statecode">1</view> -->
					<image src="../../static/user/daishouhuo.png" mode="widthFix"></image>
					<view>待收货</view>
				</view>
				<view class="states" @click="navTo('/pages/order/order?type=4','1')">
					<!-- <view class="statecode">1</view> -->
					<image src="../../static/user/pingjia.png" mode="widthFix"></image>
					<view>已完成</view>
				</view>
			</view>
		</view>
		<!-- 综合栏 -->
		<view class="synthe">
			<view class="synthe-item" @click="navTo('/pages/user/combo/combo','1')">
				<image src="../../static/user/activate.png" mode="widthFix"></image>
				<view>激活入口</view>
			</view>
			<view class="synthe-item" @click="navTo('/pages/address/address','1')">
				<image src="../../static/user/address.png" mode="widthFix"></image>
				<view>地址</view>
			</view>
			<view class="synthe-item" @click="navTo('/pages/settled/settled','1')">
				<image src="../../static/user/order.png" mode="widthFix"></image>
				<view>入驻记录</view>
			</view>
			<view class="synthe-item" @click="navTo('/pages/team/team','1')">
				<image src="../../static/user/team.png" mode="widthFix"></image>
				<view>我的团队</view>
			</view>
			<view class="synthe-item" @click="navToma">
				<image src="../../static/user/ma.png" mode="widthFix"></image>
				<view>邀请码</view>
			</view>
			<!-- <view class="synthe-item" @click="navTo('/pages/team/team','1')">
				<image src="../../static/user/vipnum.png" mode="widthFix"></image>
				<view>会员人数</view>
			</view> -->
			<view class="synthe-item" @click="navTo('/pages/user/set/setpad?type=0','1')">
				<image src="../../static/user/setpad.png" mode="widthFix"></image>
				<view>修改密码</view>
			</view>
			<view class="synthe-item" @click="navTo('/pages/user/myma','1')">
				<image src="../../static/user/myma.png" mode="widthFix"></image>
				<view>收款码</view>
			</view>
			<view class="synthe-item" @click="outlogin">
				<image src="../../static/user/outlogin.png" mode="widthFix"></image>
				<view>退出登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUser
	} from "../../api/user.js"
	export default {
		data() {
			return {
				userinfo: {},
				memberInfo: {},
				vipNum: null
			}
		},
		onShow() {
			if (this.Md.islogin()) {
				this.userinfo = uni.getStorageSync("userInfo")
				this.getData()
			}
		},
		onLoad() {},
		methods: {
			getData() {
				console.log(uni.getStorageSync("userInfo").id)
				this.post(getUser, {
					user_id: uni.getStorageSync("userInfo").id
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.memberInfo = res.data.member_info
						this.vipNum = res.data.vip_num
					}
				})
			},
			//统一跳转
			navTo(url, type) {
				// type=0不要登录 1 需要登录
				if (type == 0) {
					uni.navigateTo({
						url: url
					})
				} else {
					if (this.Md.islogin()) {
						uni.navigateTo({
							url: url
						})
					}
				}
			},
			navTo1(url, type){
				this.msg("正在开发，敬请期待","none")
			},
			// 退出登录
			outlogin(){
				this.showMd("是否退出登录",()=>{
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('token')
					this.userinfo={}
					this.memberInfo={}
					this.vipNum=null
					uni.switchTab({
						url:"/pages/index/index"
					})
				})
			},
			navToma(){
				if (this.Md.islogin()) {
					if(this.memberInfo.is_vip==1){
						uni.navigateTo({
							url:"/pages/user/ma?ma="+this.memberInfo.invite_code
						})
					}else{
						this.msg("请先开通会员","none")
						console.log(111)
					}
					
				}
			}
		}
	}
</script>

<style>
	.isvip{
		width: 44rpx;
		height: 40rpx;
	}
	.vipmun{
		position: absolute;
		left: 130rpx;
		bottom: 40rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.vipmun>text{
		color:#EBC400 ;
	}
	.vipbox {
		background-color: #FFFFFF;
		border-radius: 25rpx;
		height: 40rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #F7FF00;
		padding-right: 10rpx;
		line-height: 40rpx;
	}

	page {
		background: #F1F1F1;
	}

	.topInfo-box {
		width: 750rpx;
		height: 220rpx;
		background: #06923D;
		display: flex;
		align-items: center;
		position: relative;
	}

	.topInfo-box>image {
		width: 80rpx;
		height: 80rpx;
		display: block;

		margin-left: 30rpx;
	}

	.checkinfo {
		margin-left: 24rpx;
		font-size: 44rpx;
		font-weight: 500;
		color: #F8F7F7;
		margin-right: 20rpx;
		font-weight: bold;
	}

	.wallet {
		width: 690rpx;
		height: 300rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 12rpx;
		margin: 30rpx auto;
		padding-top: 18rpx;
	}

	.my-wallet {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 24rpx;
	}

	.wallet-item {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 24rpx;
	}

	.point {
		/* width: 33%; */
		text-align: center;
	}

	.num {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.item {
		font-size: 30rpx;
		font-weight: 400;
		color: #666666;
	}

	.order-box {
		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 12rpx;
		margin: 30rpx auto;
		padding: 20rpx;
	}

	.myorder {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mine {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.allorder {
		font-size: 30rpx;
		font-weight: 300;
		color: #333333;
	}

	.order-item {
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
	}

	.states {
		position: relative;
		text-align: center;
		margin-top: 30rpx;
		font-size: 32rpx;
	}
	.states>image {
		width: 60rpx;
	}

	.statecode {
		position: absolute;
		top: -15rpx;
		left: 40rpx;
		width: 33rpx;
		height: 33rpx;
		background: #06923D;
		border-radius: 50%;
		color: #FFFFFF;
		z-index: 9;
	}

	.synthe {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 30rpx auto;
	}

	.synthe-item {
		width: 25%;
		font-size: 32rpx;
		font-weight: 400;
		color: #666666;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 16rpx;
	}

	.synthe-item>image {
		width: 40rpx;
	}
</style>
